<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>BattleFields SpaceFighter</title>
	<meta name="description" content="">
	<link href="css/global.css" type="text/css" rel="stylesheet" />
	<link href="css/form.css" type="text/css" rel="stylesheet" />
</head>
	<?php

	require_once("config/db.php");

	$letter = array ( 1 => 'A', 2 => 'B', 3 => 'C', 4 => 'D', 5 => 'E', 6 => 'F', 7 => 'G', 8 => 'H', 9 => 'I', 10 => 'J');
	require_once('model/Battleground.php');
	require_once('model/Battleship.php');
	//vars 1 new game / 0 test game / 2 clean base position
	/*
	if($_GET['idGame'] != ''){
		$vars = 1;
		$ng = new Game($vars);
		$bg = new Battleground($_GET['idGame'], $_GET['idPlayer1'], $_GET['idPlayer2'], $vars);
	}
	else {*/

		$vars = 1;
		$ng = new Game($vars);
		$bg = new Battleground($ng->idGame, $ng->player_1->id, $ng->player_2->id, $vars);
	//}
	$jsonBattleground = $bg->jsonSerialize();
	$jsonShipP1 = $ng->jsonSerializeP1();
	$jsonShipP2 = $ng->jsonSerializeP2();
	?>
<body>

	<div id="fade" class="no">
		<div id="pop_hit">
		</div>
	</div>

	<div id="wrapper">
		<h1 class="obsidian">BattleFields SpaceFighter</h1>
		<div class="battleground" id="P1">
			<div id="ship_space" class="">
			</div>
			<table>
				<tr>
					<?php
					for($i = 0; $i <= 10; $i++){
						if($i == 0){
							echo '<th class="columnSquare empty"></th>';
						}
						else
							echo '<th class="columnSquare">'.$letter[$i].'</th>';
					}
					?>
				</tr>
				<tr>
					<?php
					for($i = 1; $i <= 10; $i++){
						echo '<th class="columnSquare">'.$i.'</th>';
						for( $k = 1; $k <= 10; $k++ ){
							echo '<td class="battleSquare" data-x="'.$letter[$k].'" data-y="'.$i.'"></td>';
						}
					}
					?>
				</tr>
			</table>
		</div><div class="battleground" id="P2">
			<div id="ship_space" class="">
			</div>
			<table>
				<tr>
					<?php
					for($i = 0; $i <= 10; $i++){
						if($i == 0){
							echo '<th class="columnSquare empty"></th>';
						}
						else
							echo '<th class="columnSquare">'.$letter[$i].'</th>';
					}
					?>
				</tr>
				<tr>
					<?php
					for($i = 1; $i <= 10; $i++){
						echo '<th class="columnSquare">'.$i.'</th>';
						for( $k = 1; $k <= 10; $k++ ){
							echo '<td class="battleSquare" data-x="'.$letter[$k].'" data-y="'.$i.'"></td>';
						}
					}
					?>
				</tr>
			</table>
		</div>
	<div class="ship_display">
	<?php
	$ng->displayBattleshipP1();
	$ng->displayBattleshipP2();
	?>
	</div>
	<button id="initialization">placer mes batiments !</button>
	</div>
	<div id="reponse">
	</div>

	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/jquery.transform2d.js" type="text/javascript"></script>
	<script>

	$xarray = {
		1 : 'A', 2 : 'B', 3 : 'C', 4 : 'D', 5 : 'E', 6 : 'F', 7 : 'G', 8 : 'H', 9 : 'I', 10 : 'J'
	};
	$json = <?= $jsonBattleground ?>;
	$jsonS1 = <?= $jsonShipP1 ?>;
	$jsonS2 = <?= $jsonShipP2 ?>;
	$player = 0;
	$nbBatiment = 0;
	$placement = 0;
	$placementOk = false;
	$pos = 0;
	$px = null;
	$py = null;
	$sens = null;
	$notifs = 0;
	$size = 0;
	$id = null;
	$compt1 = 0;
	$compt2 = 0;

	console.log($json);
<<<<<<< HEAD
=======

	function colorCase(x, y, p, v){
		$('#P'+p+' .battleSquare').each(function() {
			if( $(this).data('x') == x && $(this).data('y') == y ){
				if(!v){
					$(this).addClass('choose');
				}
				else {
					$(this).addClass('green');
				}
			}
		});
	}
	function colorClean(){
		$('.battleSquare').each(function() {
			if( $(this).hasClass('choose')){
				$(this).removeClass('choose');
			}
			if( $(this).hasClass('green')){
				$(this).removeClass('green');
			}
		});
	}
	function cleanReponse(){
		$('#reponse').empty();
	}
	function checkIndex(xarray, key){
		for(i in xarray){
			if( xarray[i] == key ){
				Nkey = i;
			}
		}
		return Nkey;
	}
	function notifications(txt){
		if( $notifs == 9 ){
			cleanReponse();
			$notifs = 0;
		}
		var that = '<div class="notification fade"><a class="close"></a><p id="notifs_'+$notifs+'"></p></div>';
		$('#reponse').append(that);
		$('#notifs_'+$notifs+'').html(txt);
		setTimeout(function(){
			$('.notification').removeClass('fade')
		}, 100);
		$notifs++;
	}
	function succesPlacement(reponse){
		if(!$placementOk){
			colorClean();
			$txt = 'Placement de bateau de taille '+reponse.size+' en case '+reponse.x+' - '+reponse.y+' du joueur '+$player;
			notifications($txt);
			$id = reponse.idShip;
			$px = reponse.x;
			$py = reponse.y;
			var xStP = reponse.x;
			var xStN = reponse.x;
			var yStP = reponse.y;
			var yStN = reponse.y;

			colorCase(reponse.x, reponse.y, reponse.player, true);
			if(reponse.xpos != 0){
				for(var i = 1; i < (reponse.size); i++){
					index = checkIndex($xarray, xStP) ;
					$pos = index;
					$pos++;
					xStP = $xarray[$pos];
					colorCase(xStP, reponse.y, reponse.player);
				}
			}
			if(reponse.xneg != 0){
				for(var i = 0; i < (reponse.size - 1); i++){
					index = checkIndex($xarray, xStN) ;
					$pos = index;
					$pos--;
					xStN = $xarray[$pos];
					colorCase(xStN, reponse.y, reponse.player);
				}
			}
			if(reponse.ypos != 0){
				for(var i = 0; i < (reponse.size - 1); i++){
					yStP++;
					colorCase(reponse.x, yStP, reponse.player);
				}
			}
			if(reponse.yneg != 0){
				for(var i = 0; i < (reponse.size - 1); i++){
					yStN--;
					colorCase(reponse.x, yStN, reponse.player);
				}
			}
		}
	}
	function createBS(player, src){
		$('#P'+player+' #ship_space').prepend('<img class="ship_'+$id+'" src="img/'+src+'" />');
	}
	function delBS(id){
		$('#P'+$player+' .ships').each( function(){
			if( $(this).data('id') == id ){
				$(this).remove();
			}
		});
	}
	function displayBattleship() {
		$.ajax({
			url: 'ajax/updatePlacement.php',
			type: 'get',
			success : updatePlacement,
			data: {
				json : $json,
				sens : $sens,
				player : $player,
				size : $size,
				idShip : $id,
				ship1 : $jsonS1,
				ship2 : $jsonS2,
				x : $px,
				y : $py
			},
			dataType: 'Json'
		})
	}
	function updatePlacement(reponse) {
		if($player == 1){
			$compt1++;
		}
		else if($player == 2){
			$compt2++;
		}
		$jsonS1 = reponse.shipP1;
		$jsonS2 = reponse.shipP2;
		$rpX = checkIndex($xarray, reponse.x);
		$rpY = reponse.y;
		$rpX = ($rpX * 42) ;
		$rpY = ($rpY * 42) ;
		createBS($player, reponse.ship[2]);
		delBS($id);
		$thisShip = $('#P'+$player+' #ship_space img.ship_'+$id+'');
		if (reponse.transform[0] != "") {
			if (reponse.transform[0] == "rotate") {
				if(reponse.transform[1] == '90'){
					$thisShip.addClass('xpos');
				}
				else {
					$thisShip.addClass('xneg');
				}
				$thisShip.animate({rotate : reponse.transform[1]+'deg' ,
					left : $rpX, top : $rpY}, 300);
			} else {
				$thisShip.addClass('yneg');
				$thisShip.animate({rotate : '180deg', translateY : reponse.transform[1] + "px",
					left : $rpX, top : $rpY}, 300);
			}
		}
		else {
			$thisShip.addClass('ypos');
			$thisShip.animate({rotate : '0deg', left : $rpX, top : $rpY}, 300);
		}
		colorClean();
		if($compt1 == 5){
			$compt1 = null;
			$player = 2;
			notifications('Player '+$player+' a toi de placer!');
			$('#initialization').fadeIn('slow');
		}
		else if($compt2 == 5){
			$compt2 = null;
			$player = 1;
			notifications('Player '+$player+' a toi de jouer!');
			$('#initialization').fadeIn('slow');
			//ON COMMENCE ENFIN A SFIGHTER COMME DES ENFOIRES!!!!!!!!!!!
		}
	}

	$('#reponse').on('click', '.notification .close', function() {
		$that =$(this).parent();
		$that.css({'opacity': 0, 'margin-top' : -($that.height())});
		setTimeout( function() {
			$that.remove();
		}, 300);
		$notifs--;
	})

	$('#initialization').on('click', function(){
		if($player == 0){
			$(this).fadeOut('slow');
			$('#P2').animate( { opacity : 0}, 100, function(){
				$(this).addClass('no');
			});
			$player = 1;
			$('#P'+$player+'.ship_placement').removeClass('no');
			notifications('Player '+$player+' a vous de placer vos batiments !');
			notifications('1 : Cliquez sur un vaisseau pour commencer le positionnement !');
			notifications('2 : Cliquez sur une des cases pour choisir l\'origine d\'un vaisseau !');
			notifications('3 : Cliquez sur les cases rouges pour décider du sens du bateaux selon les sens proposés !');
		}
		else if($player ==2){
			$(this).fadeOut('slow');
			$('#P1').animate( { opacity : 0}, 100, function(){
				$(this).addClass('no');
				$('#P1.ship_placement').addClass('no');
			});
			$('#P2').animate( { opacity : 1}, 100, function(){
				$(this).removeClass('no');
			});
			$('#P'+$player+'.ship_placement').removeClass('no');
			notifications('Player '+$player+' a vous de placer vos batiments !');
			notifications('1 : Cliquez sur un vaisseau pour commencer le positionnement !');
			notifications('2 : Cliquez sur une des cases pour choisir l\'origine d\'un vaisseau !');
			notifications('3 : Cliquez sur les cases rouges pour décider du sens du bateaux selon les sens proposés !');
		}
	})

	$('.battleground').on('click', 'td.battleSquare.choose', function(){
		$cx = $(this).data('x');
		$cy = $(this).data('y');
		if(!$placementOk){
			//on fout le placement en stand-by le temps de vérifier un click sr une des cases rouges
			$placement = 10;
			var rep = prompt('Voulez vous placer le batiment dans cette direction ? (y/n)');
			if(rep == 'y'){
				//$placementOk = true;
				$cipx = parseInt(checkIndex($xarray, $px));
				$cicx = parseInt(checkIndex($xarray, $cx));
				if( $cipx > $cicx && $cy == $py ){
					$sens = ['x', '-'];
					displayBattleship();
				}
				else if( $cipx < $cicx && $cy == $py ){
					$sens = ['x', '+'];
					displayBattleship();
				}
				else if( $cipx == $cicx && $cy < $py ){
					$sens = ['y', '-'];
					displayBattleship();
				}
				else if( $cipx == $cicx && $cy > $py ){
					$sens = ['y', '+'];
					displayBattleship();
				}
			}
			else {
				//on peut continuer le placement
				$placement = 1;
			}
		}
	})

	$('.battleground').on('click', 'td.battleSquare', function(){
		$x = $(this).data('x');
		$y = $(this).data('y');
		if( $placement == 1 ){
			//on place nos spaceship!!!! J1 a toi l'honneur!
			$.ajax({
				url: 'ajax/shipPlacement.php',
				type: 'get',
				success : succesPlacement,
				data: {
					json : $json,
					x : $x,
					y : $y,
					player : $player,
					size : $size,
					idShip : $id
				},
				dataType: 'Json'
			})
		}
		else if( $placement == 2 ){
			//si placement = 2 ! on peut enfin jouer!
			if(!$(this).hasClass('missed') || $(this).hasClass('hit')){
				var reponse = prompt('tirer en '+$x+' - '+$y+' ? (y/n)');
				if(reponse == 'y'){
					//$('#fade').removeClass('no');
					//$('#pop_hit').prepend('<p>player '+$player+' a tiré en '+$x+' - '+$y+'</p>');
					var rand = Math.floor(Math.random() * 2) + 1;
					if(rand == 1){
						$(this).addClass('hit');
					}
					else{
						$(this).addClass('missed');
					}
				}
			}
			else{
				alert('Vous avez déjà tiré ici !');
			}
		}
	})

	$('.ship_placement .ships').on('click', function(){
		$placement = 1;
		colorClean();
		$('.ships').removeClass('selected');
		$(this).addClass('selected');
		$name = $(this).data('name');
		$size = $(this).data('size');
		$id = $(this).data('id');
		notifications($name+' de taille '+$size);
	})

	$('#fade').on('click', function(){
		$(this).addClass('no');
	})

>>>>>>> beedb22b147df493e5b3c8b2c89d150af64e315f
	</script>
	<script src="js/function.js" type="text/javascript"></script>
</body>
</html>
